<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>后台管理</title>
</head>

<body>

    <!-- 头部 -->
    <div th:include="head"></div>
    <div id="bgAdm">
        <!-- 左侧导航栏 -->
        <div class="center">
            <!-- 传递点击的index -->
            <left-nav :menu="menu" @send-show-index="setShowIndex"></left-nav>
            <!-- 右侧管理列表 -->
            <div id="main">
                <!-- 用户管理 -->
                <div style="display: block;" class="user">
                    <table class="ui celled table">
                        <thead>
                            <tr>
                                <th>头像</th>
                                <th>姓名</th>
                                <th>性别</th>
                                <th>地址</th>
                                <th>邮箱</th>
                                <th>电话</th>
                                <th>操作</th>
                            </tr>
                        </thead>
                        <tbody v-for="(item, index) in userPage.records">
                            <tr v-if="!item.active">
                                <td>
                                    <div class="headImage" :style='{"background-image":"url("+item.headImage+")"}'>
                                    </div>
                                </td>
                                <td>{{item.name}}</td>
                                <td>{{item.sex}}</td>
                                <td>
                                    {{item.address}}
                                </td>
                                <td>
                                    {{item.email}}
                                </td>
                                <td>{{item.tel}}</td>
                                <td>
                                    <div class="center">
                                        <button class="ui red button" style="margin-right: 24px;"
                                            @click="deleteById(index, item.userId)">删除</button>
                                        <button class="ui primary button" @click="item.active = true">更新</button>
                                    </div>
                                </td>
                            </tr>
                            <!-- 更新的样式 -->
                            <tr v-else class="ui form">
                                <td>
                                    <div class="headImage" :style='{"background-image":"url("+item.headImage+")"}'>
                                    </div>
                                </td>
                                <td>
                                    <input type="text" v-model="item.name" placeholder="名字" required>
                                </td>
                                <td>{{item.sex}}</td>
                                <td>
                                    <input type="text" v-model="item.address" placeholder="住址" required>
                                </td>
                                <td>
                                    <input type="email" v-model="item.email" placeholder="邮箱" required>
                                </td>
                                <td>
                                    <input type="tel" v-model="item.tel" placeholder="电话" required>
                                </td>
                                <td>
                                    <div class="center">
                                        <button class="ui red button" style="margin-right: 24px;"
                                            @click="deleteById(index, item.userId)">删除</button>
                                        <button class="ui primary button" @click="update(item)">保存</button>
                                    </div>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </div>
                <!-- 分类管理 -->
                <div class="classify">
                    <table class="ui celled table">
                        <thead>
                            <tr>
                                <th>版面</th>
                                <th>名称</th>
                                <th>文章数</th>
                                <th>粉丝数</th>
                                <th>描述</th>
                                <th>创建时间</th>
                                <th>操作</th>
                            </tr>
                        </thead>
                        <tbody v-for="(item, index) in classifyPage.records">
                            <tr v-if="!item.active">
                                <td>
                                    <div class="headImage" :style='{"background-image":"url("+item.image+")"}'>
                                    </div>
                                </td>
                                <td>{{item.name}}</td>
                                <td>{{item.fans}}</td>
                                <td>
                                    {{item.articles}}
                                </td>
                                <td class="content">
                                    {{item.description.substring(0, 64)}}
                                </td>
                                <td>{{item.createTime}}</td>
                                <td>
                                    <div class="center">
                                        <button class="ui red button" style="margin-right: 24px;"
                                            @click="deleteById(index, item.classifyId)">删除</button>
                                        <button class="ui primary button" @click="item.active = true">更新</button>
                                    </div>
                                </td>
                            </tr>
                            <!-- 更新的样式 -->
                            <tr v-else class="ui form">
                                <td>
                                    <div class="headImage" :style='{"background-image":"url("+item.image+")"}'>
                                    </div>
                                </td>
                                <td>
                                    <input type="text" v-model="item.name" placeholder="分类名" required>
                                </td>
                                <td>
                                    <input type="number" v-model="item.fans" placeholder="粉丝数" required>
                                </td>
                                <td>
                                    <input type="number" v-model="item.articles" placeholder="文章数" required>
                                </td>
                                <td class="content">
                                    <input type="text" v-model="item.description" placeholder="分类描述" required>
                                </td>
                                <td>
                                    <input type="text" v-model="item.createTime" placeholder="创建时间" required>
                                </td>
                                <td>
                                    <div class="center">
                                        <button class="ui red button" style="margin-right: 24px;"
                                            @click="deleteById(index, item.classifyId)">删除</button>
                                        <button class="ui primary button" @click="update(item)">保存</button>
                                    </div>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </div>
                <!-- 文章管理 -->
                <div class="article">

                    <table class="ui celled table">
                        <thead>
                            <tr>
                                <th>封面</th>
                                <th>标题</th>
                                <th>评论数</th>
                                <th>喜欢数</th>
                                <th>描述</th>
                                <th>创建时间</th>
                                <th>操作</th>
                            </tr>
                        </thead>
                        <tbody v-for="(item, index) in articlePage.records">
                            <tr>
                                <td>
                                    <div class="headImage" :style='{"background-image":"url("+item.cover+")"}'>
                                    </div>
                                </td>
                                <td>{{item.title}}</td>
                                <td>{{item.comments}}</td>
                                <td>
                                    {{item.likes}}
                                </td>
                                <td>
                                    {{item.description.substring(0, 64)}}
                                </td>
                                <td>{{item.createTime}}</td>
                                <td>
                                    <div class="center">
                                        <button class="ui red button" style="margin-right: 24px;"
                                            @click="deleteById(index, item.articleId)">删除</button>
                                        <button class="ui primary button">
                                            <a target="_blanck" :href="'/articleDetail/'+item.articleId">详情</a>
                                        </button>
                                    </div>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </div>
                <!-- 评论管理 -->
                <div class="comment">
                    <table class="ui celled table">
                        <thead>
                            <tr>
                                <th>点赞数</th>
                                <th>回复数</th>
                                <th>内容</th>
                                <th>审核状态</th>
                                <th>创建时间</th>
                                <th>操作</th>
                            </tr>
                        </thead>
                        <tbody v-for="(item, index) in commentPage.records">
                            <tr>
                                <td>{{item.likes}}</td>
                                <td>{{item.replies}}</td>
                                <td class="content">
                                    {{item.content.substring(0, 64)}}
                                </td>
                                <td v-if="item.status == 0" class="negative">
                                    审核中...
                                </td>
                                <td v-else class="positive">
                                    审核通过
                                </td>
                                <td>{{item.createTime}}</td>
                                <td>
                                    <div class="center">
                                        <button class="ui red button" style="margin-right: 24px;"
                                            @click="deleteById(index, item.commentId)">删除</button>
                                        <button class="ui primary button" @click="approve(item)">审核</button>
                                    </div>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                    <div class="center">
                        <div>
                            <button class="ui red button" @click="deleteAll()" style="margin-right: 24px;">一键删除</button>
                            <button class="ui primary button" @click="approveAll()">一键通过</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- 分页 -->
        <div class="page">
            <div class="center">
                <div class="ui pagination menu" v-for="index in showPage.pages">
                    <div v-if="index == 1" class="active item" @click="getPage(index)">{{index}}</div>
                    <div v-else class="item" @click="getPage(index)">{{index}}</div>
                </div>
            </div>
            <div class="center">
                <div class="small gray">
                    <button class="ui secondary button" @click="backPage" :disabled="showPage.current == 1">上一页</button>
                    <span>当前第{{showPage.current}}页 </span>
                    <span>共{{showPage.pages}}页 </span>
                    <span>共计{{showPage.total}}条数据</span>
                    <button class="ui primary button" @click="nextPage"
                        :disabled="showPage.current == showPage.pages">下一页</button>
                </div>
            </div>
        </div>
    </div>
    <script src="/js/bgAdm.js"></script>
    <link rel="stylesheet" href="/css/bgAdm.css">
</body>

</html>